<template>
  <div class="service-wrapper">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <el-button class="mb-3" type="primary" @click="createCode">生成邀请码</el-button>
          <div class="fs16 bold" style="margin-bottom:16px">邀请码：{{ code }}</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="d-flex d-center flex-start">
            <div class="fs16 mr-2 bold" style="width: 100px;text-align: center;">上传客服微信二维码</div>
            <el-upload
              class="avatar-uploader"
              action="http://dev-mall-admin.siyuyunai.com/files/upload"
              :headers="getAuthHeaders()"
              :data="uploadData"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="image" :src="image" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="mt-3">
      <div class="fs16 mb-2 bold">邀请码列表</div>
      <el-table
        :data="codeTable"
        border=""
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="code" label="邀请码"></el-table-column>
        <el-table-column prop="name" label="使用者（注册用户）"></el-table-column>
        <el-table-column prop="createtime" label="使用时间"></el-table-column>
      </el-table>
    </el-card>

    <!-- 分页区域 -->
    <Pagination :obj="obj" @pagination="getCodeList($event)" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      image: "",
      uploadData: {},
      code: "",
      codeTable: [],
      obj: {
        total: 0,
      },
    };
  },
  created() {
    this.getCodeList();
    this.getQRcode();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    async uploadSuccess(res, file) {
      // console.log(res, "上传二维码");
      if (res.code != "0") return this.$message("上传二维码失败");
      this.image = this.showImgUrl + res.data;

      const formData = new FormData();
      formData.append("id", res.data);
      const { data: res2 } = await this.$http.post("editServiceQrCode", formData);
      // console.log(res2, 2222);
      if (res2.code != "0") return this.$message("修改二维码失败");
      // console.log(res2, "修改二维码");
    },
    beforeUpload(file) {
      // console.log(file, "上传二维码之前");
      this.uploadData.files = file;
      // console.log(file.size);
      const isLt2M = file.size / 1024 / 1024 < 0.5;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 0.5MB!");
      }
      return isLt2M;
    },
    async getQRcode() {
      const { data: res } = await this.$http.post("findServiceQrCode");
      if (res.code != "0") return this.$message("查询二维码失败");

      this.image = this.showImgUrl + res.data.dict_value;
      // console.log(res, "查询二维码");
    },
    async createCode() {
      this.$confirm(`确定要生成 邀请码 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.post("saveInvitationCode");
          if (res.code != "0") return this.$message("生成邀请码失败");

          this.code = res.data.code;
          this.getCodeList();
        })
        .catch(() => {});
    },
    // 获取邀请码列表
    async getCodeList(page) {
      if (page && page.newPage) this.queryInfo.pagenum = page.newPage;
      if (page && page.newSize) this.queryInfo.pagesize = page.newSize;

      const formData = new FormData();
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      const { data: res } = await this.$http.post("findInvitationCodeByPage", formData);
      // console.log(res, "邀请码列表");
      if (res.code != "0") {
        return this.$message("获取邀请码失败");
      }
      this.codeTable = res.data.result;
      this.obj.total = res.data.totalCount;
    },
  },
};
</script>

<style lang="scss">
.service-wrapper {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #6c74b1;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-icon-plus:before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
